<template>
<!-- 富文本编辑,写文章主体内容 -->
      <div id="editor">
        <mavon-editor
          @save="saveData"
          style="height: 100%"
          v-model="content"
          :ishljs="true"
          class="editor"
          ref=md
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)"
          @change="onEditorChange($event)"
        ></mavon-editor>
        <!-- @imgAdd="imgAdd"
          @imgDel="imgDel" -->
      </div>
</template>
​
<script>
  import { mavonEditor } from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'
  export default {
    name: "editor",
    props: {
      value: {
        type: String
      }
    },
    watch:{ // 监听实时传递数据
      value(val, newVal){
        if(val.length == 0){
          $('.auto-textarea-block').empty()
        }
      }
    },
    data(){
        return {
            content: this.value   // 传入值
        }
    },
    created(){
      // this.$emit('listenToChildEvent', '\n')
    },
    components: {
      mavonEditor
    },
    computed:{
        editor() {
            return this.$refs.md.mavonEditor;
        }
    },
    methods:{
        // 失去焦点
        onEditorBlur(editor) {},
        // 获得焦点
        onEditorFocus(editor) {
          console.log('开始事件')},
        // 开始
        onEditorReady(editor) {
        },
        // 值发生变化
        onEditorChange(editor) {
            //this.content = editor.html;
            console.log(this.content);
            this.$emit('listenToChildEvent', this.content)
            // console.log(this.content)
        },
        saveData (valu, callback) { // markdown中的保存按钮
            // 保存数据，用于页面按钮操作的显示
            this.content = valu
            this.htmlData = callback
            console.log('原始：',this.content) // markdown的原始数据
            // console.log(this.htmlData) // markdown自动转换为html后的数据
            }
        }
  }
</script>